<template>
    <div style="margin-top: 10px">
      <ul class="record-link flex-display flex-center-align">
          <li 
            class="record-link__item flex-display flex-center-align flex-num-one  flex-center-pack " 
            @click="fnSelectRecord(item,index)"
            :class="{'current': index === currentrIndex}"
            v-for="(item, index) in recordList" 
            :key="index">{{item.name}}
        </li>
      </ul> 
      <div class="record-link__div">
        <div class="amount-box flex-display flex-center-align flex-center-pack" v-if="total1 || total2">
            <img src="../../../../static/img/money.svg">
            <p v-if="data=='sr'">总额：￥{{total1}}元</p>
            <p v-else>总额：￥{{total2}}元</p>          
        </div>
      </div>   
      <div class="scroll-box">
            <scroll 
                ref="suggest"
                :data="data == 'sr' ? arr1 : arr2"
                :pullup="isPullup"
                class="scroll"
                @touchEnd="touchEnd"
                :pull-up-load="pullUpLoad" 
                @scroll="scroll"
                @scrollToEnd="fnScrollDropGetList">
                
                <ul v-if="data =='sr'">
                    <div class="top-tip" v-if="pulldownMsg">
                        <img src="../../../base/loading/loading.gif" v-if="pulldownMsg == '加载中...'"/>
                        <span class="refresh-hook">{{pulldownMsg}}</span>
                    </div>
                    <li v-for="(item,idx) in arr1" :key="idx" >
                        <!-- 收入，新 -->
                        <div v-if="recordList[currentrIndex].type == 'newrecord'" class="box0 box1">
                            <p>订单编号：{{item.order_no}}</p>
                            <p>机器编号：{{item.machine_code}}</p>
                            <p>机器名称：{{item.machine_name}}</p>
                            <p>支付金额：<span style="color:red">{{item.total_fee}}</span> 元</p>
                            <p>支付方式：{{item.pay_way}}</p>
                            <p>支付时间：{{item.pay_time}}</p>                    
                        </div>
                        <!-- 收入，旧 -->
                        <div v-if="recordList[currentrIndex].type == 'oldrecord'"  class="box0 box1">
                            <p>订单编号：{{item.ordernum}}</p>
                            <p>支付时间：{{item.createtime}}</p> 
                            <p>支付金额：<span style="color:red">{{item.yongjin}}</span> 元</p>
                            <p>提示信息：{{item.msg}}</p>
                        </div>
                    </li>
                    <!--底部loading组件-->
                    <loading v-show="isHasMore && arr1.length" title="加载中..." ></loading>
                    <p class="not-tit" v-if="arr1.length && !isHasMore">————我是有底线的————</p>  
                    <!--没数据得情况-->
                    <div class="not-data__box flex-display flex-display-column flex-center-pack flex-center-align" v-if="!isHasMore && !arr1.length">
                        <img src="../../../../static/img/not-data.png"/>
                        <span>抱歉！没有相关收入明细记录</span>
                    </div>  
                </ul>          
                <ul v-if="data =='zc'">
                    <div class="top-tip" v-if="pulldownMsg">
                        <img src="../../../base/loading/loading.gif" v-if="pulldownMsg == '加载中...'"/>
                        <span class="refresh-hook">{{pulldownMsg}}</span>
                    </div>
                    <li v-for="(item,idx) in arr2" :key="idx" class="li-box">
                        <!-- 支出，提现 -->
                        <div v-if="recordList[currentrIndex].type == 'tx'" class="box0 box2">
                            <p>提现单号：{{item.ordernum}}</p>
                            <p>提现金额：<span style="color:red">{{item.agent_tixian_fee}}</span> 元</p>
                            <p>提现时间：{{item.dealtime}}</p>
                        </div>
                        <!-- 支出，扫码 -->
                        <div v-if="recordList[currentrIndex].type == 'sm'"  class="box0 box3">
                            <p>订单编号：{{item.order_no}}</p>
                            <p>机器编号：{{item.machine_code}}</p>
                            <p>机器名称：{{item.machine_name}}</p>
                            <p>支付金额：<span style="color:red">{{item.total_fee}}</span> 元</p>
                            <p>支付方式：{{item.pay_way}}</p>
                            <p>支付时间：{{item.pay_time}}</p>
                        </div>
                        <br>
                    </li>
                    <!--底部loading组件-->
                    <loading v-show="isOtherHasMore && arr2.length" title="加载中..."></loading>
                    <p class="not-tit" v-if="arr2.length && !isOtherHasMore">————我是有底线的————</p>
                    <!--没数据得情况-->
                    <div class="not-data__box flex-display flex-display-column flex-center-pack flex-center-align" v-if="!isOtherHasMore && !arr2.length">
                        <img src="../../../../static/img/not-data.png"/>
                        <span>抱歉！没有相关支出明细记录</span>
                    </div>
                </ul>
            </scroll> 
        </div>
        
    </div>
  </template>
  <script>
  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  import Scroll from '@/base/scroll/scroll'
  import ComHeader from '@/common/ComHeader'
  import ComFooter from '@/common/ComFooter'
  import { Cell, Badge,Indicator,Toast  } from 'mint-ui';
  import api from "@/fetch/api"
  import Loading from '@/base/loading/loading'
    export default {
      name: 'msgList',
      props:["data","maxHeight"],
      data(){
        return {
          total1:'',
          total2:'',
          arr1:[],
          arr2:[],
          t1:'primary',
          t2:'default',
          t3:'primary',
          t4:'default',
          detail:"tx",
          xinjiu:"new",
          pullUpLoad: true,
          page: 1,                // 当前请求的页码
          otherPage:1,
          limit: 10,              // 每页显示多少条
          isHasMore: true,        // 是否有更多
          isPullup: true,         // 是否需要派发滚动结束事件 
          previous: null,         // 是否还有下一页
          typeFlag: 'newrecord',    
          isOtherHasMore: true,  
          otherPrevious: null,
          pulldownMsg: '', 
          balanceAddRecordType: 'newrecord',  // 获取用户余额收入默认是新记录
          balanceSubRecordType: 'tx',         // 获取用户余额支出详情默认是提现  
          recordList: [
              {
                  type:'newrecord',
                  name:'新数据',
                  val: 1,
                  count: 'newcount'
              },
              {
                  type:'oldrecord',
                  name:'旧数据',
                  val: 1,
                  count: 'oldcount'
              }
          ],
          
          currentrIndex: 0  
        }
      },
      created(){
          Indicator.open({
              text: '加载中...',
              spinnerType: 'fading-circle'
          })
          // 1、获取收入明细，渲染列表
          this.shourulist(this.xinjiu+"record")

          // 2、获取收入总额
          this.shourusum("newcount")

          // 3、获取支出明细，提现，渲染列表
          this.zhichulist(this.detail)

          //  4、获取支出，提现总额
          this.zhichusum("txcount")
    
      },
      mounted () {
      },
      watch:{
        // 监听支出数据
        data:{
            handler (new_val) {
                console.log(new_val)
                this.page = 1 
                this.otherPage = 1 
                this.currentrIndex = 0
                this.otherPrevious = this.previous = null
                this.typeFlag = new_val+"count"
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                })
                if(this.$refs.suggest) {
                    this.$refs.suggest.scrollTo(0, 0)
                }
                if(new_val == 'sr') {
                    let attr = [
                        {
                            type:'newrecord',
                            name:'新数据',
                            val: 1,
                            count: 'newcount'
                        },
                        {
                            type:'oldrecord',
                            name:'旧数据',
                            val: 1,
                            count: 'oldcount'
                        }
                    ]
                    this.recordList = attr
                    this.shourulist('newrecord')
                    this.shourusum("newcount")
                }else {
                    let attr = [
                        {
                            type:'tx',
                            name:'提现支出',
                            val: 2,
                            count: 'txcount'
                        }
                    ]
                    this.recordList = attr
                    this.zhichulist('tx',false)
                    this.zhichusum("txcount")
                }
                
            }
        },
      },
      components: {
        Cell,
        Badge,
        ComHeader,
        ComFooter,
        Loading,
        Scroll,
        Indicator,
        Toast
      },
      methods: {
        /**
         * @desc 切换记录导航条
         * @param {Object} item 当前点击的对象
         * @param {Number} index 当前索引
         */  
        fnSelectRecord(item, index) {
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            this.currentrIndex = index
            this.page = this.otherPage = 1

            if(this.$refs.suggest) {
                this.$refs.suggest.scrollTo(0, 0)
            }
            switch(item.val) {
                case 1:
                    this.xinjiu =  item.type == 'oldrecord' ? 'old' :'new'
                    this.shourulist(item.type)
                    this.shourusum(item.count)
                    break;
                case 2:
                    this.detail = item.type == 'tx' ? 'tx' : ''
                    this.zhichulist(item.type)
                    this.zhichusum(item.count)
                    break;
            }
            
            
        },
        scroll() {
            this.pulldownMsg = '释放立即加载'
        },
        touchEnd() {
            this.pulldownMsg = '加载中...'
            setTimeout(() => {
                this.page = 1
                this.otherPage = 1
                if(this.$refs.suggest) {
                    this.$refs.suggest.scrollTo(0, 0)
                }
                this.arr2 = []
                this.arr1 = []
                this.isOtherHasMore =  this.isHasMore = true
                this.data == 'sr' ? this.shourulist(this.recordList[this.currentrIndex].type, true) : this.zhichulist(this.recordList[this.currentrIndex].type, true)
                this.$refs.suggest.scrollTo(0, 0)
            },2000)
        },
        /**
         * @author yang
         * @desc 下拉获取数据
         */
        fnScrollDropGetList() {
            if(this.previous || this.otherPrevious) {
                this.page++
                this.otherPage++
                this.data == 'sr' ? this.shourulist(this.recordList[this.currentrIndex].type, true) : this.zhichulist(this.recordList[this.currentrIndex].type, true)
            }
        },
        // 1、获取收入明细，渲染列表 this.getUId()
        shourulist(type,isLoading = false){
              var params1 = {
                  userid: this.getUId(),
                  type: type,
                  page: this.page,
                  limit: this.limit
              };
              this.arr2 = []
              api.getbalanceAddRecord(params1)
                  .then(res => {
                      this.pulldownMsg = ''
                      Indicator.close()
                  })  
                  .catch(error => {
                      this.pulldownMsg = ''
                      Indicator.close()
                      if(error.status === 200){
                        Toast({
                            message: '获取数据成功',
                            duration:1000
                        });
                        if(!isLoading && this.$refs.suggest) {
                            this.$refs.suggest.scrollTo(0, 0)
                        }
                        this.arr1 = !isLoading ? error.data.results : [...this.arr1, ...error.data.results]
                        this.isHasMore = error.data.next ? true : false
                        this.previous = error.data.next
                      }
                  })
        },
        // 2、获取收入总额
        shourusum(type){
              var params7 = {
                  userid: this.getUId(),
                  type:type
              };
              api.getbalanceAddRecord(params7)
                  .catch(error => {
                      this.total1 = error.data.all_add_money
                  }) 
        },
        // 获取支出明细，提现，渲染列表
        zhichulist(type, isLoading = false){
              var params = {
                  userid: this.getUId(),
                  type:type,
                  page: this.otherPage,
                  limit: this.limit
              };
              this.arr1 = []
              api.getbalanceSubRecord(params)
                  .then(res => {
                      this.pulldownMsg = ''
                      Indicator.close()
                  })   
                  .catch(error => {
                      this.pulldownMsg = ''
                      Indicator.close()
                      if(error.status === 200){
                          Toast({
                            message: '获取数据成功',
                            duration:1000
                        });
                        if(!isLoading && this.$refs.suggest) {
                            this.$refs.suggest.scrollTo(0, 0)
                        }
                        this.arr2 = !isLoading ? error.data.results : [...this.arr2, ...error.data.results]
                        this.isOtherHasMore = error.data.next ? true : false
                        this.otherPrevious = error.data.next
                        
                        
                      }
                  })
        },
        // 获取支出，提现总额
        zhichusum(type){
              var params4 = {
                  userid: this.getUId(),
                  type:type
              };
              api.getbalanceSubRecord(params4)
                  .catch(error => {
                      this.total2 = error.data.all_sub_money
                  })   
        },
      }
    }
  </script>
  <style lang="stylus" scoped>
  .not-data__box{
      display flex;
      align-items center;
      justify-content center
      flex-direction:column;
      color #666;
      height 100%;
      >img{
          width 80%
          height auto
          margin-bottom 5px;
      }
  }
  .li-box{
    background #fff;
    border-bottom 1px solid #e5e5e5
    display: flex;
    align-items: center; 
  }
  .box0{
    background-color: #fff;padding: 10px;
    }
    .not-tit{
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align :center;
        color:#666;
        font-size:0.35rem;
    }
    .amount-box{
        width 100%;
        height 1rem;
        background #f6f8fa;
        color #ff0000;
        border-bottom:1px solid #e5e5e5;
        >img{
            width 0.6rem
            height 0.6rem
            margin-right 0.2rem
        }
    }
  .box1{
    margin: 0px 0px ;
    border-bottom:1px solid #e5e5e5;
    }
    .scroll-box{
        position: fixed;
        width: 100%;
        top: 4.5rem;
        bottom: 0;
    }
    .scroll{
        height :100%;
        overflow: hidden
    }
  .btn{
    height: 20px;
    }
    .flex-box{
        display:flex
    }
    .top-tip{
        width: 100%;
        height 0.8rem;
        max-height: 0.8rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
    }
.top-tip>img{
  width 24px;
  height 24px;
}

.record-link__div{
    position fixed;
    top:3.5rem;
    right:0px;
    left:0px;
}
.record-link{
    width 100%;
    height 1rem;
    background #f6f8fa;
    position fixed;
    top:2.5rem;
    right:0px;
    left:0px;
    >li{
        height 100%;
        text-align center;
        border-top:1px solid #e5e5e5;
        border-bottom:1px solid #e5e5e5;
        &.current{
            color #26a2ff;
            border-bottom:2px solid #26a2ff
        }
    }
}
  </style>
  
  